<template>
  <el-drawer
    :append-to-body="true"
    :wrapperClosable="false"
    :title="title"
    size="1200px"
    :visible="open"
    @close="handleClose"
  >
    <div class="drawer_container">
      <el-table
        height="calc(100vh - 154px)"
        :header-cell-style="tableHeaderStyle"
        :data="selectTopicList"
        class="cum_table"
      >
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="题型" align="center" prop="topicType">
          <template slot-scope="scope">
            <el-tag>{{ $store.getters.topicTypeText[scope.row.topicType] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="500" align="center" prop="content" show-overflow-tooltip></el-table-column>
        <el-table-column label="难度" align="center" prop="difficulty">
          <template slot-scope="scope">
            <el-tag type="success">{{ $store.getters.difficultyText[scope.row.difficulty] }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom_btns">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'selectTopicListDrawer',
  props: {
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '已选择试题'
    },
    selectTopicList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      //表头样式
      tableHeaderStyle: {
        'background-color': '#f8f8f9',
        'color': '#333333',
        'font-size': '14px',
        'font-family': 'PingFangSC, PingFang SC',
        'font-weight': '400'
      }
    }
  },
  methods: {
    // 关闭题库抽屉
    handleClose() {
      this.$emit('update:open', false)
    }
  }
}
</script>

<style scoped lang="scss">
.drawer_container {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;

  .cum_table {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #E8EAEB;

    .icon_box {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0 8px;
    }
  }

  ::v-deep .el-table:before {
    height: 0;
  }

  .bottom_btns {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
    box-sizing: border-box;
  }
}
</style>
